<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>gown.js example: Checkboxes</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    <script src="../../lib/pixi/pixi.js"></script>
    <script src="../../dist/gown.js"></script>
</head>
<body>
<script>
    var stage = new PIXI.Container();

    var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0xffffff});
    document.body.appendChild(renderer.view);

	var metalTheme = new GOWN.ThemeParser("../../themes/assets/metalworks_desktop/metalworks_desktop.json");
	var aeonTheme = new GOWN.ThemeParser("../../themes/assets/aeon_desktop/aeon_desktop.json");
    var chk;

    function onCompleteAeon() {
        // initialize theme
        var aeonchk;
        aeonchk = new GOWN.Check(aeonTheme);
        aeonchk.x = aeonchk.y = 20;

        var aeonchk2;
        aeonchk2 = new GOWN.Check(aeonTheme);
        aeonchk2.selected = true;
        aeonchk2.x = 60;
        aeonchk2.y = 20;
        stage.addChild(aeonchk);
        stage.addChild(aeonchk2);

        requestAnimationFrame(animate);
    }

    function onCompleteMetal() {
        // initialize theme
        chk = new GOWN.Check(metalTheme);
        chk.x = 20;
        chk.y = 60;

        var chk2;
        chk2 = new GOWN.Check(metalTheme);
        chk2.selected = true;
        chk2.x = 60;
        chk2.y = 60;
        stage.addChild(chk);
        stage.addChild(chk2);

        requestAnimationFrame(animate);
    }

	metalTheme.once(GOWN.Theme.COMPLETE, onCompleteMetal, this);
    aeonTheme.once(GOWN.Theme.COMPLETE, onCompleteAeon, this);

    function animate() {
        // render the stage
        renderer.render(stage);
        requestAnimationFrame(animate);
    }
    GOWN.loader.load();
</script>

</body>
</html>
